<template><ul class="user-list">
    <li v-show="abc.length">
        <span>姓名</span>
        <span>性别</span>
        <span>电话</span>
        <span>年龄</span>
        <span>编辑</span>
    </li>
    <li v-for="(val, key) in arr" :key="val.phone">
        <span>{{val.name}}</span>
        <span>{{val.gender|a}}</span>
        <span>{{val.phone}}</span>
        <span>{{val.age}}</span>
        <span @click="sc(key)">删除</span>
    </li>
</ul></template>
<script>
// import bus from '../eventBus'
export default {
        data() {
    return {
        currentKey : -1
    }
},
    computed: {
        arr() {
            let mobileReg = /^1(3[4-9]|5[0-27-9]|8[78])\d{8}$/;
            let selectedHandle = {
                '-1': () => this.abc,
                '0':  () => this.abc.filter(val => !val.gender),
                '1':  () => this.abc.filter(val => val.gender),
                '2':  () => this.abc.filter(val => mobileReg.test(val.phone)),
                '3':  () => [...this.abc].sort((prev, next) => prev.age - next.age),
            };
            return selectedHandle[this.currentKey]();
        }
    },//数据模型
    methods: {
        sc(index){
            this.abc.splice(index,1)
        },
        emitNews(){
            VueEvent.$emit('to-news',this.currentKey)
        }
    },//各种方法
    props: ['abc'] , // 隐形的数据模型
    created() {
            this.$bus.$on('changeCurrentKey',(index)=>{
                this.currentKey = index;
            })
    },//组件在渲染时 会自动执行这个函数
    filters:{
            a(val){
                return val ? '男':'女'
            }
    }//过滤

}
</script>
<style lang="scss" scoped>
    .user-list{
        margin: 0;
        padding: 0;
        li{
            width: 100vm;
            font-size: 0;
            span{
                background-color: orangered;
                color: white;
                opacity: 0.5;
                margin-top: 1px;
                display: inline-block;
                font-size: 14px;
                width: 20%;
                text-align: center;
                line-height: 40px;
            }
        }


    }

</style>